<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* p{color: red;} */
    /* div{font-size: 10px;} */
    /* 浏览器默认字体大小是16px 2rem相当于32px */
    body,table,tr,td{font-size: 15px;} 
  </style>
</head>
<body>
  <!--继承的好处
  1.父元素设置样式，子元素可以继承部分属性（border不能继承）
  2.减少CSS代码 
  CSS层叠
  可以定义多个样式
  不冲突时，多个样式可以层叠为一个
  冲突时，按不同样式规则优先级来应用样式 
  CSS使用方法的优先级行内样式>内部样式>外部样式
  说明：1.链入的外部样式表和内部样式表之间的优先级取决于所处位置的先后
  2.最后定义的优先级最高（就近原则）
  CSS优先级规则
  同一样式表中：
  1.权值相同
  就近原则（离被设置元素越近优先级越高）
  2.权值不同
  根据权职来判断CSS样式，
  哪种CSS样式权值高，就使用哪种样式
  选择器权职
  标签选择器：权值为1
  类选择器和伪类：10
  ID选择器：100
  通配符选择器：0
  行内样式：1000
  ！important声明高
  -->
  <div>
    <p>CSS<span>继承</span></p>
    <div>CSS层叠</div>
  </div>
  <p>CSS继承和层叠</p>
  <table border='1'>
    <tr>
      <td>CSS继承</td>
      <td>Css层叠</td>
    </tr>
  </table>
</body>
</html>